<template>
	<view class="bg">
		<view class="setting-header">
			<view v-if="isLogin" class="user-info">
				<up-avatar shape="square" :src="src"></up-avatar>
				<view style="display: flex;flex-direction: column;margin-left: 32rpx;">
					<view>{{name}}</view>
					<view style="display: flex;flex-wrap: nowrap;align-items: center;">
						<view>$：0</view>
					</view>
				</view>
			</view>
			<view v-else  class="user-info">
				<up-avatar else :text="'登'" @click="clogin"></up-avatar>
			</view>
			<view class="user-setting">
				<up-icon name=setting></up-icon>
			</view>
		</view>
		<view class="user-history">
			<view v-for="(item,index) in userChatList" :key="index">
				<view v-if="item.type === 'image'">
					<image :src="item.pic_url" mode="aspectFill" style="width: 100%;height: 800rpx;box-sizing: border-box;padding: 20rpx;border-radius: 10rpx;"></image>
				</view>
				<view else >
					<up-collapse >
					    <up-collapse-item
					      :title="item.create_time"
					      name="Docs guide"
					    >
					      <text class="u-collapse-content">{{item.content}}</text>
					    </up-collapse-item>
					    
					  </up-collapse>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { computed, onMounted, reactive } from 'vue';
	import {wxLogin,backLogin,hello,getPicList,getTextList} from '../../utis/api.js'
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import {ref} from 'vue'
	
	import { getToken, setToken } from '../../utis/authon.js';
	import { getBaseUrl } from '../../utis/request.js';
	let src = ref("");
	let name = ref("未登录");
	let isLogin = ref(false);
	let textList = ref();
	let imgList = ref();
	onShow(()=>{
		initDate()
	})
	onMounted(()=>{
		if(uni.getStorageSync("token")) {
			isLogin.value = true;
			src.value = getBaseUrl()+"/"+uni.getStorageSync("avatarUrl");
			name.value = uni.getStorageSync("nickName")
			initDate();
		} else {
			isLogin.value = false
		}
	})
	
	const initDate = ()=>{
		getPicList().then(res=>{
			imgList.value = res.data.map(el=>{
				let time = new Date(el.create_time);
				el.create_time = time.getMonth()+"-"+time.getDay()+" "+time.getHours()+":"+time.getMinutes();
				el.timestap = time.getDate();
				el.type = "image";
				return el;
			});
		})
		getTextList().then(res=>{
			textList.value = res.data.map(el=>{
				let time = new Date(el.create_time);
				el.create_time = time.getMonth()+"-"+time.getDay()+" "+time.getHours()+":"+time.getMinutes();
				el.timestap = time.getDate()
				el.type="text";
				return el;
			});
		})
	}
	
	let userChatList = computed(()=>{
		return (imgList.value||[]).concat((textList.value||[])).sort((a,b)=>{
			return b.timestap-a.timestap;
		})
	})
	const clogin = ()=>{
		login();
	}
	const login = ()=>{
		wxLogin().then(res=>{
			if(res.errMsg === "login:ok") {
				backLogin({code:res.code}).then(authon=>{
					console.log(authon.data)
					if(authon.code === 0) {
						setToken(authon.data.token);
						uni.setStorageSync("session_key",authon.data.session_key);
						uni.setStorageSync("openid",authon.data.openid);
						uni.setStorageSync("token",authon.data.token);
						uni.setStorageSync("nickName",authon.data.nickName);
						uni.setStorageSync("avatarUrl",authon.data.avatarUrl);
						src.value = authon.data.avatarUrl;
						uni.navigateBack({
							delta: 1
						  })
						uni.navigateTo({
						  url: 'pages/views/my',
						})
					}
				})
			} else {
				uni.showToast({
					title:"登录失败"
				})
			}
		})
	}
	
</script>
<style scoped lang="scss">
		.setting-header{
			width: 100%;
			box-sizing: border-box;
			overflow: hidden;
			padding: 20rpx;
			background-color: #f5f2f5;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-direction: row;
			.user-info{
				display: flex;
				flex-wrap: nowrap;
			}
		}
		.bg{
			background-color: #f5f2f5;
			height: 100vh;
		}
</style>
